import "./Index.css";
import React from "react";
// import axios from "../../utils/http";
import { Carousel } from "antd";

const contentStyle = {
  height: "332px",
  width: "100%",
  color: "#fff",
  lineHeight: "160px",
  textAlign: "center",
  background: "#364d79",
};

class Index extends React.Component {
  constructor() {
    super();
    this.state = {
      publishedBook: "",
      publishedBooks: "",
      publishedbestsellers: "",

      boyChannelBook: "",
      boyChannelBooks: "",
      boybestsellers: "",
      

      girlChannelBook: "",
      girlChannelBooks: "",
      girlbestsellers: "",
      
      nowBook:{publishBook: 0,boyBook: 0,girlBook: 0,},

      selectCircle: "",

      
    };
  }

  componentDidMount() {
    this.getPublishedBook();
    this.getBoyChannelBook();
    this.getGirlChannelBook();
    this.getSelectCircle();
  }

  // 获取出版图书数据和出版图书畅销数据
  getPublishedBook = () => {
    this.axios({
      url: "/index/getPublishedBook",
      method: "get",
    }).then((data) => {
      let newBooks = [];
      console.log(data.data.data)
      data.data.data.forEach((item, i) => {
        if (item.blockbuster === 1) {
          this.setState({
            publishedBook: data.data.data[i],
          });
        } else {
          newBooks.push(data.data.data[i]);
        }
      });
      this.setState({
        publishedBooks: newBooks,
      });
    });
    this.axios({
      url: "/index/getPublishedbestsellers",
      method: "get",
    }).then((data) => {
      this.setState({
        publishedbestsellers: data.data.data,
      });
    });
  };

  // 获取男生频道图书数据和男生频道畅销数据
  getBoyChannelBook = () => {
    this.axios({
      url: "/index/getBoyChannelBook",
      method: "get",
    }).then((data) => {
      let newBooks = [];
      data.data.data.forEach((item, i) => {
        if (item.blockbuster === 1) {
          this.setState({
            boyChannelBook: data.data.data[i],
          });
        } else {
          newBooks.push(data.data.data[i]);
        }
      });
      this.setState({
        boyChannelBooks: newBooks,
      });
    });
    this.axios({
      url: "/index/getBoybestsellers",
      method: "get",
    }).then((data) => {
      this.setState({
        boybestsellers: data.data.data,
      });
    });
  };

  // 获取女生频道图书数据和女生频道畅销数据
  getGirlChannelBook = () => {
    this.axios({
      url: "/index/getGirlChannelBook",
      method: "get",
    }).then((data) => {
      let newBooks = [];
      data.data.data.forEach((item, i) => {
        if (item.blockbuster === 1) {
          this.setState({
            girlChannelBook: data.data.data[i],
          });
        } else {
          newBooks.push(data.data.data[i]);
        }
      });
      this.setState({
        girlChannelBooks: newBooks,
      });
    });
    this.axios({
      url: "/index/getGirlbestsellers",
      method: "get",
    }).then((data) => {
      this.setState({
        girlbestsellers: data.data.data,
      });
    });
  };

  // 获取精选圈子数据
  getSelectCircle = () => {
    this.axios({
      url: "/index/getSelectCircle",
      method: "get",
    }).then((data) => {
      let newArr = data.data.data;
      newArr.forEach((item) => {
        if (item.peopleNum >= 100000) {
          item.peopleNum = parseInt(item.peopleNum / 10000) + "w+";
        }
      });
      this.setState({
        selectCircle: newArr,
      });
    });
  };

  // 根据数据得到图书对应的div
  getBooks = (List) => {
    if (List) {
      return List.map((item) => {
        return (
          <div>
            <img
              alt=""
              className="Cover"
              src={"http://localhost:8888" + item.bookImg}
              onClick={() => this.gotoBookDetails(item)}
            ></img>
            <p className="BookName" onClick={() => this.gotoBookDetails(item)}>{item.bookName}</p>
            <p className="Author">{item.authorName}</p>
          </div>
        );
      });
    }
  };

  // 根据数据的得到畅销图书列表
  getBestsellers = (List,type) => {
    if (List) {
      return List.map((item, i) => {
        return (
          <div className="List" onMouseOver={() => this.changeNowBook(type,i)} style={this.state.nowBook[type] === i ? {height: '125.6px'} : {height: '36.6px'}}>
            <div>
              <p>{i + 1}</p>
              <div>
                <span onClick={() => this.gotoBookDetails2(item)}>{item.bookName}</span>
                <div className="readNum">
                  <span className="iconfont icon-ai-eye "></span>
                  <span>{item.readNum}</span>
                </div>
              </div>
            </div>
            <img alt='' src={`http://localhost:8888${item.bookImg}`} onClick={() => this.gotoBookDetails2(item)}></img>
          </div>
        );
      });
    }
  };

  changeNowBook(type,index){
    console.log(index)
    let newBook = JSON.parse(JSON.stringify(this.state.nowBook))
    newBook[type] = index
    this.setState({
      nowBook: newBook,
    })
  }

  // 展示精选圈子div
  showSelectCircle = (List) => {
    if (List) {
      return List.map((item) => {
        return (
          <div className="Circle">
            <img alt="" src={"http://localhost:8888" + item.imgSrc} onClick={() => this.gotoCircle()}></img>
            <h1>{item.circleName}</h1>
            <p>{item.circleAbstract}</p>
            <div>
              <p>
                <span className="iconfont icon-renshu"></span>
                <span>{item.peopleNum}</span>
              </p>
              <p>
                <span className="iconfont icon-icon_luntan-mian"></span>
                <span>{item.commentsNum}</span>
              </p>
            </div>
          </div>
        );
      });
    }
  };

  gotoCircle = () => {
    this.props.history.push({
      pathname: "/TotalEntry/CircleDetails",
    });
  }

  // 点击图书跳转到对应的图书详情
  gotoBookDetails = (item) => {
    console.log(item)
    this.props.history.push({
      pathname: "/TotalEntry/BookDetails",
      state: { id: item.id },
    });
  };
  gotoBookDetails2 = (item) => {
    console.log(item)
    this.props.history.push({
      pathname: "/TotalEntry/BookDetails",
      state: { id: item.bookId },
    });
  };

  // 点击图书的分类跳转到分类模块
  gotoClass = (index, num) => {
    this.props.history.push({
      pathname: "/TotalEntry/Classification",
      state: { index: index, num: num },
    });
  }

  render() {
    return (
      <div>
        <div className="banner">
          <Carousel autoplay>
            <div>
              <img alt="" style={contentStyle} src="./images/banner1.jpg"></img>
            </div>
            <div>
              <img alt="" style={contentStyle} src="./images/banner2.png"></img>
            </div>
            <div>
              <img alt="" style={contentStyle} src="./images/banner3.png"></img>
            </div>
          </Carousel>
          {/* <div className="prevBanner">
            <span className="iconfont icon-shangxiazuoyouTriangle14"></span>
          </div>
          <div className="nextBanner">
            <span className="iconfont icon-shangxiazuoyouTriangle12"></span>
          </div> */}
        </div>
        <div className="published">
          <div className="title">
            <h1>出版图书</h1>
            <div className="category">
              <span className="category2" onClick={() => this.gotoClass(0, 0)}>小说</span>
              <span>|</span>
              <span className="category2" onClick={() => this.gotoClass(0, 5)}>励志成功</span>
              <span>|</span>
              <span className="category2" onClick={() => this.gotoClass(0, 1)}>文学</span>
              <span>|</span>
              <span className="category2" onClick={() => this.gotoClass(0, 8)}>经济管理</span>
              <span>|</span>
              <span className="category2" onClick={() => this.gotoClass(0, 0)}>更多</span>
            </div>
          </div>
          <div className="show">
            <div className="LeftShow">
              <p className="BookName" onClick={() => this.gotoBookDetails(this.state.publishedBook)}>{this.state.publishedBook.bookName}</p>
              <p className="Author">作者：{this.state.publishedBook.authorName}</p>
              <p className="Introduction">
                {this.state.publishedBook.bookIntroduce}
              </p>
              <img
                alt=""
                className="Cover"
                src={"http://localhost:8888" + this.state.publishedBook.bookImg}
                onClick={() => this.gotoBookDetails(this.state.publishedBook)}
              ></img>
            </div>
            <div className="MidShow">
              {this.getBooks(this.state.publishedBooks)}
            </div>
            <div className="RightShow">
              <p className="listName">畅销榜</p>
              {this.getBestsellers(this.state.publishedbestsellers,'publishBook')}
            </div>
          </div>
        </div>
        {/* <div className="SelectCircle">
          <div className="title">
            <h1>精选圈子</h1>
          </div>
          <div className="CirShow">
            {this.showSelectCircle(this.state.selectCircle)}
          </div>
        </div> */}
        <div className="boyChannel">
          <div className="title">
            <h1>男生频道</h1>
            <div className="category">
              <span className="category2" onClick={() => this.gotoClass(1, 0)}>玄幻</span>
              <span>|</span>
              <span className="category2" onClick={() => this.gotoClass(1, 4)}>奇幻</span>
              <span>|</span>
              <span className="category2" onClick={() => this.gotoClass(1, 2)}>武侠</span>
              <span>|</span>
              <span className="category2" onClick={() => this.gotoClass(1, 3)}>仙侠</span>
              <span>|</span>
              <span className="category2" onClick={() => this.gotoClass(1, 0)}>更多</span>
            </div>
          </div>
          <div className="BoyShow">
            <div className="LeftShow">
              <p className="BookName" onClick={() => this.gotoBookDetails(this.state.boyChannelBook)}>{this.state.boyChannelBook.bookName}</p>
              <p className="Author">作者：{this.state.boyChannelBook.authorName}</p>
              <p className="Introduction">
                {this.state.boyChannelBook.bookIntroduce}
              </p>
              <img
                alt=""
                className="Cover"
                src={
                  "http://localhost:8888" + this.state.boyChannelBook.bookImg
                }
                onClick={() => this.gotoBookDetails(this.state.boyChannelBook)}
              ></img>
            </div>
            <div className="MidShow">
              {this.getBooks(this.state.boyChannelBooks)}
            </div>
            <div className="RightShow">
              <p className="listName">畅销榜</p>
              {this.getBestsellers(this.state.boybestsellers,'boyBook')}
            </div>
          </div>
        </div>
        <div className="girlChannel">
          <div className="title">
            <h1>女生频道</h1>
            <div className="category">
              <span className="category2" onClick={() => this.gotoClass(2, 0)}>现代言情</span>
              <span>|</span>
              <span className="category2" onClick={() => this.gotoClass(2, 1)}>古代言情</span>
              <span>|</span>
              <span className="category2" onClick={() => this.gotoClass(2, 2)}>幻想言情</span>
              <span>|</span>
              <span className="category2" onClick={() => this.gotoClass(2, 3)}>青春校园</span>
              <span>|</span>
              <span className="category2" onClick={() => this.gotoClass(2, 0)}>更多</span>
            </div>
          </div>
          <div className="GirlShow">
            <div className="LeftShow">
              <p className="BookName" onClick={() => this.gotoBookDetails(this.state.publishedBook)}>{this.state.girlChannelBook.bookName}</p>
              <p className="Author">
                作者：{this.state.girlChannelBook.authorName}
              </p>
              <p className="Introduction">
                {this.state.girlChannelBook.bookIntroduce}
              </p>
              <img
                alt=""
                className="Cover"
                src={
                  "http://localhost:8888" + this.state.girlChannelBook.bookImg
                }
                onClick={() => this.gotoBookDetails(this.state.girlChannelBook)}
              ></img>
            </div>
            <div className="MidShow">
              {this.getBooks(this.state.girlChannelBooks)}
            </div>
            <div className="RightShow">
              <p className="listName">畅销榜</p>
              {this.getBestsellers(this.state.girlbestsellers,'girlBook')}
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default Index;
